<template>
    <div>
        <vue-office-pdf v-if="type === 'PDF'" :src="src" @error="error" />
        <vue-office-docx v-else-if="type === 'DOCX'" :src="src" @error="error" />
        <vue-office-excel v-else-if="type === 'XLSX'" :src="src" style="height: 100vh;" @error="error" />
    </div>
</template>
<script>
import VueOfficePdf from '@vue-office/pdf'
import VueOfficeExcel from '@vue-office/excel'
import VueOfficeDocx from '@vue-office/docx'
import { download } from '@/api/business/file'
export default {
    components: {
        VueOfficePdf,
        VueOfficeExcel,
        VueOfficeDocx
    },
    data() {
        return {
            type: '',
            url: '',
            src: ''
        }
    },

    created() {
        debugger
        var url = this.$route.query.url
        var id = this.$route.query.id
        this.getFileStream(id)
        this.url = url
        this.int()

    },

    methods: {

        error(a, b, c) {

            this.$message.error('文档预览异常')
        },

        int() {
            debugger
            var extension = this.url.split('.').pop();//文件类型
            extension = extension.toUpperCase()//转为大小
            switch (extension) {
                case 'PDF':
                    this.type = 'PDF'
                    break;
                case 'XLSX':
                    this.type = 'XLSX'
                    break;
                case 'XLS':
                    this.type = 'XLSX'
                    break;
                case 'DOCX':
                    this.type = 'DOCX'
                    break;
                default:
                    this.$message.error('预览仅支持PDF,DOCX,XLSX,XLX格式')
                    //this.$router.go(-1)
                    break
            }
        },
        getFileStream(id) {
            download(id).then(res => {
                // debugger
                if(res){
                    const blob = new Blob([res])
                    this.src = blob
                }else{
                    this.$message.error('找不到对应的文件/文件不存在')
                }

            })
        }
    },
};
</script>
